<template>
	<view>
		<view class="position-main">
			<view class="top-head-box">
				<view class="position">{{ post_desc.position || '-'}}<text class="pull-right">{{ post_desc.salary || '-' }}</text></view>
				<view class="desc">
					<text class="iconfontPT iconziyuan2"></text>{{ post_desc.city  || '-'  + ' ' + (post_desc.area  || '-') }}
					<text class="stance"></text>
					<text class="iconfontPT icongongzuojingyan"></text>{{ post_desc.experience || '-' }}
					<text class="stance"></text>
					<text class="iconfontPT iconxueli"></text>{{ post_desc.education || '-' }}
					<text @click.stop="handleSetCollection(post_desc)" :class="{'iconfontPT pull-right collection': true, 'iconshoucang-weixuanzhong': !post_desc.sc_state, 'iconshoucang-yixuanzhong': post_desc.sc_state}"></text>
				</view>
			</view>
			<view class="recruiter-box">
				<navigator hover-class="hoverClass2" class="navigator-box" :url="'/pages/recruit/hr-detail/index?id=' + hr_member.guid">
					<image class="pull-left" :src="hr_member.portrait"></image>
					<view class="t1">{{ hr_member.name || '-' }}</view>
					<view class="t2">{{ company.title || '-' }}<text class="inline-block text-center" style='width:20rpx;'>·</text>{{ hr_member.post || '-' }}</view>
<!-- 					<view class="t3"><text class="iconfontPT icondianhua"></text>{{ hr_member.phone || '-' }}</view>
 -->					<text class="iconfontPT iconxiayibu"></text>
				</navigator>
			</view>
			<view class="position-detail">
				<view class="tit">职位详情</view>
				<view class="detail">
					<text>{{post_desc.requirement}}</text>
				</view>
				<view class="lable-list">
					<text class="lable-itme" v-for="(item, index) in post_desc.key_word" :key="index">{{item}}</text>
				</view>
			</view>
			<view class="company-dtl">
				<navigator :url="'/pages/recruit/company-dtl/index?id=' + company.id" hover-class="hoverClass2">
					<view class="company-desc">
						<view class="company-logo">
							<image :src="`${host}/${company.logo}`"></image>
						</view>
						<view class="company-name">
							<view class="t1">{{ company.full_name || '-' }}</view>
							<view class="t2">{{ company.financing || '-'}}
								<text class="inline-block text-center" style='width:20rpx;'>
									·
								</text>
								{{ company.scale || 0}}人
								<text class="inline-block text-center" style='width:20rpx;'>·</text>
								{{ company.industry || '-'}}
							</view>
							<text class="iconfontPT iconxiayibu"></text>
						</view>
					</view>
				</navigator>
				<view class="company-map-box">
					<map id="map" show-location :markers="markers" :enable-zoom="false" :enable-scroll="false" bindcontroltap="controltap"
					 :latitude="post_desc.dimension" scale="16" :controls="controls" :longitude="post_desc.longitude" class="w100"
					 style="height: 360rpx;"></map>
					<view class="showbg" @click="clickMapFn"></view>
				</view>
			</view>
		</view>
		<btnTpl @confirmEvent="nowMsgFn" v-if="hr_member.guid != timId">
			立即沟通
		</btnTpl>
		<btnTpl v-if="identity === 2" edit="true" @confirmEvent="handlePositonPromotion" @confirmEdit="handleEditJob">
			<view slot="edit">编辑职位</view>
			职位升级
		</btnTpl>
	</view>
</template>

<script>
	import btnTpl from '../../components/recruit/btn-tpl.vue'
	import {
		getPositionDetail
	} from '../../../apis/recruit/index.js'
	import {
		addCollection,
		cancleCollection
	} from '../../../apis/public/index.js'
	
	export default {
		data() {
			return {
				post_desc: '',
				hr_member: '',
				company: '',
				timId: '',
				identity: 1,
				markers: [{
					id: 0,
					latitude: 30.641112,
					longitude: 104.042331,
					iconPath: '/static/images/location.png',
					callout: {
						content: '',
						color: '#333',
						fontSize: 14,
						borderRadius: 10,
						bgColor: '#fff',
						padding: '10',
						display: 'ALWAYS',
						textAlign: 'center'
					},
				}]
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				this.timId = uni.getStorageSync('openId')
				this.initDataFn();
			}
		},
		components: {
			btnTpl
		},
		computed:{
			host(){
				return this.$baseHost.car
			}
		},
		onShow() {
			this.identity = uni.getStorageSync('identity')
		},
		methods: {
			handleSetCollection(data) {
				this.$loading.show()
			
				if (this.post_desc.sc_state) {
					cancleCollection({
						id: data.sc_id
					}).then(res => {
						this.$loading.hide()
					})
				} else {
					const params = {
						collection_id: data.id,
						type: 6
					}
			
					addCollection(params).then(res => {
						this.post_desc.sc_id = res.data
						this.$loading.hide()
					})
				}
				this.post_desc.sc_state = !this.post_desc.sc_state
			
			},
			initDataFn() {
				let _this = this;
				getPositionDetail({
					id: _this.id
				}).then(res => {
					if (res.code == 1) {
						let key_word = res.data.post_desc.key_word
						res.data.post_desc.key_word = key_word ? key_word.split('-`-') : key_word

						let dimension = res.data.post_desc.dimension;
						res.data.post_desc.dimension = parseFloat(dimension) + 0.0005
						_this.company = res.data.company
						_this.hr_member = res.data.hr_member
						_this.post_desc = res.data.post_desc
						_this.markers[0].latitude = dimension
						_this.markers[0].longitude = res.data.post_desc.longitude
						_this.markers[0].callout.content = res.data.company.full_name
					}
				})
			},
			nowMsgFn(e) {

				let _this = this,
					params = {
						url: '/pages/recruit/chat-box/index',
						conversationID: `C2C${_this.hr_member.guid}gdx`
					};
				// uni.navigateTo({
				// 	url: '/pages/recruit/chat-box/index'
				// })
				this.$store.dispatch('tim/checkoutConversation', params)
			},
			//点击地图导航
			clickMapFn() {
				let _this = this;
				uni.getLocation({
					type: 'wgs84',
					success: res => {
						let obj = { //​使用微信内置地图查看位置。
							latitude: parseFloat(_this.post_desc.dimension), //要去的纬度-地址
							longitude: parseFloat(_this.post_desc.longitude), //要去的经度-地址
							name: _this.company.full_name,
							address: _this.post_desc.company_address
						}
						uni.openLocation(obj)
					}
				})
			},
			handlePositonPromotion() {
				const id = this.id

				uni.navigateTo({
					url: `/pages/recruit/position-promotion/index?id=${id}`
				});
			},
			handleEditJob() {
				const id = this.id
				console.log(id)
				uni.navigateTo({
					url: `/pages/recruit/add-position/index?id=${id}`
				});
			},
		}
	}
</script>

<style lang="less">
	.position-main {
		padding: 0 30rpx 200rpx 30rpx;
		color: #333;
	}

	.top-head-box {
		margin-top: 30rpx;
	}

	.position {
		font-weight: bold;
		font-size: 48rpx;

		text {
			color: #E41805;
			font-weight: bold;
			font-size: 30rpx;
		}
	}

	.desc {
		margin-top: 20rpx;
		font-size: 24rpx;

		.iconfontPT {
			margin-right: 12rpx;
			font-size: 24rpx;
			&.collection{
				font-size: 40rpx;
				margin-top: -15rpx;
				&.iconshoucang-yixuanzhong{
					color: #FF9933;
				}
			}
		}

		.stance {
			display: inline-block;
			width: 36rpx;
		}
	}

	.recruiter-box {
		margin-top: 37rpx;
		padding: 40rpx 0;
		box-shadow: 0 1rpx 0.5rpx -1rpx #CCCCCC, 0 -1rpx 0.5rpx -1rpx #CCCCCC;
		overflow: hidden;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 20rpx;
			vertical-align: top;
		}

		.t1 {
			font-weight: bold;
			font-size: 30rpx;
			line-height: 30rpx;
		}

		.t2,
		.t3 {
			font-weight: 400;
			font-size: 24rpx;
			line-height: 24rpx;
			margin-top: 11rpx;

			.iconfontPT {
				font-size: 24rpx;
				padding: 0 10rpx 0 0;
			}
		}
	}

	.position-detail {
		overflow: hidden;
		padding-bottom: 10rpx;

		.tit {
			font-size: 34rpx;
			font-weight: bold;
			padding: 31rpx 0 29rpx;
		}

	}


	.detail {
		color: #5F5F5F;
		font-size: 28rpx;
		line-height: 45rpx;
	}

	.lable-list {
		margin-top: 24rpx;
		height: 52rpx;

		.lable-itme {
			padding: 11rpx 26rpx;
			font-size: 24rpx;
			color: #666;
			background: #f8f8f8;
			margin-right: 10rpx;
		}
	}

	.company-dtl {
		padding: 30rpx 0;
		box-shadow: 0 -1rpx 0.5rpx -1rpx #CCCCCC;
		margin-top: 30rpx;
	}

	.company-logo {
		width: 96rpx;
		height: 96rpx;
		text-align: center;
		line-height: 96rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		background: #E41805;
		border-radius: 10rpx;
		letter-spacing: 3rpx;
		display: inline-block;
		vertical-align: top;

		image {
			width: 96rpx;
			height: 96rpx;
		}

	}

	.company-name {
		font-size: 30rpx;
		color: #333;
		display: inline-block;
		margin-left: 30rpx;
		position: relative;
		width: calc(100% - 126rpx);

		.t1 {
			margin-top: 3rpx;
		}

		.t2 {
			font-size: 24rpx;
			color: #333;
			font-weight: 300;
			margin-top: 18rpx;
		}
	}

	.company-name .iconxiayibu,
	.navigator-box .iconxiayibu {
		position: absolute;
		right: 0;
		font-size: 32rpx;
		top: 32rpx;
	}

	.company-map-box {
		margin-top: 30rpx;
		position: relative;
	}

	.showbg {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: #fff;
		opacity: 0;
	}

	.navigator-box {
		position: relative;
	}
</style>
